<template >
  <div>
    <!-- 头部 -->
    <Search />
    <div class="personal" v-loading.fullscreen.lock="loading"    element-loading-text="加载中">
      <!-- 左边 -->
      <div class="personal-left">
        <div class="personal-user">
          <img class="userImg" src="../../../public/images/font/ia_100000011.jpg" />
          <div class="username">
            <h2>{{user.userNickName?user.userNickName:"偶尔"}}</h2>
            <div class="age">
              <div>园龄 {{user.age?user.age:0}}年</div>
              <div @click="changeIshow(1)">个人主页</div>
            </div>
          </div>
        </div>
        <!-- 粉丝 -->
        <div class="personal-fans">
          <div class="fans-item">
            <p>粉丝</p>
            <p>{{user.followerCount?user.followerCount:0}}</p>
          </div>
          <div class="fans-item">
            <p>关注</p>
            <p>{{user.followedCount?user.followedCount:0}}</p>
          </div>
          <div class="fans-item clear-border">
            <p>银子</p>
            <p>{{user.voteCount?user.voteCount:0}}</p>
          </div>
        </div>
        <!-- 个人简介 -->
        <div class="personal-profile">
          <div class="personal-title">
            <span class="profile">个人简介: {{user.memo}}</span>
          </div>
          <p></p>
          <span class="open-btn" style="display: none;">展开</span>
        </div>
        <!-- 我的书架 -->
        <div class="personal-book">
          <div class="my-book">
            <h2 @click="changeIshow(2)">我的书架</h2>
            <div class="traingle" @click="changeIshow(2)"></div>
          </div>
          <div class="book-item">
            <div class="item">
              <p>拥有</p>
              <p>{{user.favCount?user.favCount:0}}</p>
            </div>
            <div class="item">
              <p>心愿单</p>
              <p>{{user.bookCount?user.bookCount:0}}</p>
            </div>
            <div class="item clear-border">
              <p>推荐</p>
              <p>{{user.personalCategoryCount?user.personalCategoryCount:0}}</p>
            </div>
          </div>
        </div>
        <!-- 我的创作 -->
        <div class="produce">
          <h2>我的创作</h2>
          <div class="produce-inner">
            <div class="produce-item">
              <p>文章</p>
              <p>{{user.articleCount?user.articleCount:0}}</p>
            </div>
            <div class="produce-item">
              <p>文集</p>
              <p>{{user.categoryCount?user.categoryCount:0}}</p>
            </div>
          </div>
        </div>
        <!-- 订单中心 -->
        <div class="Order">
          <h2>订单中心</h2>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000012.svg" />
            <div @click="changeIshow(3)">我的订单</div>
          </div>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000013.svg" />
            <div @click="changeIshow(4)">样式兑换</div>
          </div>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000014.svg" />
            <div @click="changeIshow(5)">地址管理</div>
          </div>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000015.svg" />
            <div>我的银子</div>
          </div>
        </div>
        <!-- 个人设置 -->
        <div class="Order">
          <h2>个人设置</h2>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000016.svg" />
            <div>编辑资料</div>
          </div>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000017.svg" />
            <div>账户安全</div>
          </div>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000012.svg" />
            <div>推送设置</div>
          </div>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000018.svg" />
            <div>消息管理</div>
          </div>
          <div class="Order-item">
            <img src="../../../public/images/font/ia_100000020.svg" />
            <div>刮刮卡</div>
          </div>
        </div>
      </div>
      <!-- 侧边栏 -->
      <MainNavList />
      <!-- 个人主页 -->
      <Home v-show="isShoWPage===1" :user="user" />
      <Book v-show="isShoWPage===2" />
      <Order v-show="isShoWPage===3" />
      <Change v-show="isShoWPage===4" />
      <Location v-show="isShoWPage===5" />
    </div>
    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script>
import Home from "./Home";
import Book from "./BooK";
import Order from "./Order";
import Change from "./Change";
import Location from "./Location";
import Search from "../../components/Search";
import MainNavList from "../../components/MainNavList";
import Footer from "../../components/Footer";

import { reqGetPersonal } from "../../API/personal";

export default {
  name: "Personal",
  components: {
    Home,
    Book,
    Order,
    Change,
    Location,
    Search,
    MainNavList,
    Footer,
  },
  data() {
    return {
      isShoWPage: 1,
      user: {},
      userId: "",
      loading: false,
    };
  },
  computed: {},
  methods: {
    changeIshow(num) {
      this.isShoWPage = num;
    },
  },
  async mounted() {
    //先判断用户是否已经登录了
    const dataId = this.$route.params.userId;
    // localStorage.setItem("userId", this.userId);
    // const dataId = localStorage.getItem("userId");
    // console.log(dataId);

    if (dataId) {
      this.loading = true;
      const res = await reqGetPersonal(`?id=${dataId}`);
      // console.log(res);
      this.user = res.data;
      this.loading = false;
    }
  },
};
</script>

<style  scoped>
.personal {
  display: flex;
  width: 1080px;
  margin: 70px 0 180px 180px;
}
.personal-left {
  width: 235px;
  margin: 0 30px;
  border: 1px solid #cedce4;
}
.personal-user {
  display: flex;
  padding: 16px 16px 0px;
}
.userImg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 20px;
}
.age {
  display: flex;
  justify-content: space-between;
  width: 136px;
  height: 16px;
  margin-top: 10px;
}
.age :last-child {
  color: #4684e2;
}
/*粉丝 */
.personal-fans {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  border-bottom: 1px solid #dae1e7;
}
.fans-item {
  border-right: 1px solid #dae1e7;
}
.fans-item p {
  width: 50px;
  margin: 4px 0;
  text-align: center;
}
.clear-border {
  border-right: none;
}
/* 个人简介 */
.personal-profile {
  padding: 16px;
  border-bottom: 1px solid #dae1e7;
}
/* 我的书架  */
.personal-book {
  padding: 16px;
  border-bottom: 1px solid #dae1e7;
}
.my-book {
  position: relative;
}
.traingle {
  position: absolute;
  right: 0;
  top: 3px;
  width: 0;
  height: 0;
  border-left: 6px solid #4684e2;
  border-right: none;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.book-item {
  display: flex;
}
.book-item .item {
  width: 60px;
  margin-top: 10px;
  text-align: center;
  border-right: 1px solid #dae1e7;
}
/* 我的创作 */
.produce {
  padding: 16px;
  border-bottom: 1px solid #dae1e7;
}
.produce-inner {
  display: flex;
  justify-content: space-around;
}
.produce-item {
  width: 100px;
  margin-top: 10px;
  text-align: center;
}
/* 订单中心 和个人设置*/
.Order {
  padding: 16px;
}
.Order-item {
  /* margin-top:10px; */
  padding: 0 10px;
  width: 185px;
  height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #dae1e7;
}
.Order-item img {
  margin-right: 5px;
}
/* 右边 */
</style>
